<template>
  <div>
    <!-- 方式一：通过this.$store.state.msg获得数据 -->
    我是a2==={{this.$store.state.msg}}==={{count}}=={{data}}===*{{this.$store.getters.g1}}===**{{g1}}
    <br />
    <input type="text" v-model="count" />
    <button @click="btn1">点我</button>
    <button @click="btn2">3</button>
  </div>
</template>
<script>
// 方式二：通过映射数据近来
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      data: this.$store.state.count,
    };
  },
  methods: {
    //   方式二  映射方法
    ...mapMutations(["m1"]),
    btn1() {
      // 方式一：通过this.$store.commit接受store里面的函数，并且传参
      //   this.$store.commit("m1", 2);

      //   然后调用方法
      this.m1(2);
    },
    // 方法二  映射
    ...mapActions(["a1"]),
    btn2() {
      // 方法一
      //   this.$store.dispatch("a1", 5);
      // 映射
      this.a1(5);
    },
  },
  computed: {
    //   映射数据
    ...mapState(["count"]),
    ...mapGetters(["g1"]),
  },
};
</script>
<style lang="less" scoped>
</style>